<template>
  <div class="app-container">
    <Ht-search-form
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      permission="user:configInfo:view"
    ></Ht-search-form>
    <ht-table
      ref="dataTable"
      :multi-select="true"
      :dictMap="dictMap"
      :reqConfig="reqConfig"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
    >
    </ht-table>
    <!-- 编辑信息组件 -->
    <edit-config-info
      ref="editConfigDialog"
      @editComplete="editComplete"
    />
  </div>
</template>
<script>
import {
  delConfigInfo,
  apiUrlConfig
} from "@/api/authority_app/config/configInfo";
import { listPageMixin } from "@/libs/listPageMixin";
import editConfigInfo from "@/views/system/configInfo/components/EditConfigInfo";

export default {
  name: "ConfigInfo",
  components: { editConfigInfo },
  mixins: [listPageMixin],
  data() {
    return {
      // 查询参数
      queryParams: {
        configName: "",
        configKey: ""
      },
      // 搜索
      formOptions: [],
      reqConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        { label: `ID`, prop: "id", visible: false },
        { label: `${ this.lang('authority.configInfo.form.configKey') }`, prop: "configKey" },
        { label: `${ this.lang('authority.configInfo.form.configName') }`, prop: "configName" },
        { label: `${ this.lang('authority.configInfo.form.configValue') }`, prop: "configValue" },
        { label: `${ this.lang('authority.configInfo.form.configType') }`, prop: "configType", dictCode: "sys_yes_no" },
        { label: `${ this.lang('authority.configInfo.form.createTime') }`, prop: "createTime", width: "180" },
        {
          label: `${ this.lang('common.operate') }`, type: 'operate', buttonList: (row) => [
            {
              label: `${ this.lang('common.edit') }`,
              permission: 'user:configInfo:edit',
              doFunc: (rowData) => {
                this.handleAction('update', rowData);
              }
            },
            {
              label: `${ this.lang('common.delete') }`,
              permission: 'user:configInfo:remove',
              doFunc: (rowData) => {
                this.handleAction('del', rowData);
              }
            }
          ]
        }
      ],
      opButtonList: () => {
        return [
          {
            label: `${ this.lang('common.add') }`,
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:configInfo:add",
            actionType: 'add',
            clickFun: () => {
              this.handleAction("add");
            }
          },
          {
            label: `${ this.lang('common.delete') }`,
            type: "danger",
            icon: "el-icon-delete",
            permission: "user:configInfo:remove",
            actionType: 'del',
          }
        ];
      }
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "configKey",
        defaultAttr: {
          size: "small",
          label: `${this.lang('authority.configInfo.form.configKey' )}`
        },
      },
      {
        type: "input",
        prop: "configName",
        defaultAttr: {
          size: "small",
          label: `${this.lang('authority.configInfo.form.configName' )}`
        },
      },
    ];
    this.formOptions = formOptions;
  },
  methods: {
    /***
     * 表格查询执行的API
     */
    // listReq(pageParams) {
    //   return listConfigInfo(pageParams);
    // },
    /***
     * 按钮操作汇总
     */
    handleAction(type, row = {}) {
      switch (type) {
        case "add":
          this.$refs.editConfigDialog.show();
          break;
        case "del":
          const id = row.id || this.ids.join(",");
          this.$confirm(
            `是否确认删除 ${row ? "这" : ids.split(",").length} 个配置数据?`,
            "警告",
            {
              confirmButtonText: `${ this.lang('common.confirm') }`,
              cancelButtonText: `${ this.lang('common.cancel') }`,
              type: "warning"
            }
          )
            .then(function() {
              return delConfigInfo(id);
            })
            .then(() => {
              this.doQuery();
              this.msgSuccess(`${this.lang('common.deleteSuccess' )}`);
            })
            .catch(action => {});
          break;
        case "update":
          this.$refs.editConfigDialog.show(row.id);
          break;
      }
    }
  }
};
</script>
